<!-- 移动端下拉树 -->
<template>
  <cascaderField
    v-model="value"
    :field-props="{
      label: labelInfo.show ? labelInfo.label : '',
      placeholder: '请选择',
    }"
    :title="labelInfo.show ? labelInfo.label : ''"
    :options="options"
    @finish="onFinish"
  />
</template>

<script setup>
import { defineOptions, defineProps, ref, computed, watch } from "vue";
import { isEqual } from "lodash";
import { CascaderField } from "@mdfe/vant";

defineOptions({
  name: "LayoutTreeSelect",
});

const props = defineProps({
  componentStyle: {
    type: Object,
    default: () => {},
  },
});

const multiple = computed(() => {
  if (props.componentStyle?.advancedType) {
    return props.componentStyle.advancedType === "multiple";
  }
  return false;
});

const required = computed(() => {
  if (props.componentStyle?.advancedType) {
    return props.componentStyle.advancedIsRequired;
  }
  return false;
});

const value = ref();
const options = ref([]);
const oldAdvancedDataSource = ref(""); // 旧数据

const labelInfo = computed(() => {
  if (props.componentStyle?.title) {
    return {
      label: props.componentStyle.title.text,
      show: props.componentStyle.title.show,
    };
  }
  return { label: "下拉树", show: true };
});

function onFinish(node) {
  emit("finish", node);
}

function handleSource(module) {
  if (module) {
    const advancedDataSource = module.advancedDataSource;
    if (isEqual(oldAdvancedDataSource.value, advancedDataSource)) return;
    oldAdvancedDataSource.value = advancedDataSource;
    // getTree(advancedDataSource);
  }
}

watch(
  () => multiple.value,
  (_value) => {
    if (_value) {
      value.value = [];
    } else value.value = undefined;
  }
);

watch(
  () => props.componentStyle,
  (module) => handleSource(module),
  {
    deep: true,
  }
);
</script>
<style lang="scss" scoped>
// @include c('layout-select', $md-prefix) {
//   display: flex;
//   align-items: center;
//   padding: 8px;

//   @include e('label') {
//     color: #333333;
//     font-size: 14px;
//     line-height: 20px;
//     font-family: PingFang SC;
//     margin-right: 8px;
//   }
// }
</style>
